<template>

  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
    <div class="van-cell">
<!-- 将下面两个组件在同一行显示   -->

    <van-cell  title="校区" value="安吉校区">



    </van-cell>
      <van-cell is-link @click="showPoup" title="楼层">{{value}}</van-cell></div>
      <van-action-sheet v-model="Poup" :actions="actions" @select="onSelect" ></van-action-sheet>




     <van-card  v-for="item in list" :key="item.roomId" @click="gotoDetail(item)" :title="item.roomNo" :thumb="thumb"  class="van-card_title" >


       <div slot="desc" class="van-card__desc">
        <div class="van-card_desc">
          <div class="van-card_desc_item">
            <div class="van-card_desc_item_title">房间类型:{{item.roomType}}</div>

          </div>
          <div class="van-card_desc_item">
            <div class="van-card_desc_item_title">房间状态:{{item.roomStatus}}</div>
          </div>

        </div>
        <div slot="thumb" class="van-card__thumb">
          <div style="background-color: #39a9ed"></div>
        </div>
      </div>


     </van-card>



  </div>
</template>

<script>

export default {

  name: "roomlist",
  data:function () {
    return{
      Poup:false,
      actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
      radio:'1',
      value:'',
      list:'',
      thumb:'#dfdfdf',
    }

  },
  methods:{
      getRoom(){


        this.$http.get('/system/room/list').then( (response)=>{

          this.list=response.data.rows;
          console.log(this.list);
        })
      },
    showPoup(){
        this.Poup=true;
    },
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.Poup = false;
      this.value=item.name
      this.getRoom();
      // Toast(item.name);
    },
    gotoDetail(item){
      console.log(item);
      this.$router.push({path:'/RoomDetailView',
                          query: {oneRoom:item},

      })
    },
  },
  mounted() {

  }

}
</script>

<style scoped>
/*将div下面的组件在同一行显示
*/
.van-card_title{
  text-align: left;
}
</style>
